<template>
<div class="view_container">
    <!-- <van-nav-bar
        :title="$route.meta.title"
        :fixed = 'true'
        :placeholder ="true">
    </van-nav-bar> -->
    <div class="container">
        <img src="@/assets/logo.png" class="logo">
        <img src="@/assets/mine_bg.png">
        <ul>
            <li>
                <div class="left">
                    <van-icon name="phone" />
                    <span>电话号码</span>
                </div>
                <span>{{user.phone}}</span>
            </li>
            <li @click="toPath('/updatePassword')">
                <div class="left">
                    <van-icon name="friends" />
                    <span>修改密码</span>
                </div>
                <van-icon name="arrow" />
            </li>
        </ul>
        <van-button
            class="bt"
            @click="loginOut"
            :loading='loading'>
            退出登录
        </van-button>
    </div>
</div>
</template>
<script>
//个人中心页面
export default {
    name: 'Mine',
    data() {
        return {
            loading:false,
        };
    },
    computed:{
        user:{  //全局的用户信息
            get(){
                return this.$store.state.userModule.user;
            },
            set(newValue){
                this.$store.commit('userModule/setUser',newValue);
            },
        },
    },
    methods: {
        loginOut() {  //退出登陆
            // this.loading = true;
            this.user = {};
            this.$notify({ type: 'success', message:'已经退出'});
            this.toPath('/login');
            // this.$Api.outLogin().then(()=>{
            //     this.user = {};
            //     this.toPath('/login');
            // }).catch((res) => {
            //     this.$notify({ type: 'danger', message:res.msg});
            // }).finally(()=>{
            //     this.loading = false;
            // });
        },
        toPath(path) {  //跳转到相应页面
            this.$router.push({ path: path });
        },
    },
}
</script>
<style scoped lang="scss">
.view_container {
    position: relative;
    background-color: #f1f1f2;
    height: calc(var(--clientHeight) - 60px);
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
    >.container{
        display: grid;
        grid-gap: 30px;
        img{
            width: 100%;
            max-width: 100%;
        }
        >.logo{
            width: 50%;
            margin: 0 auto;
            margin-top: 30px;
        }
        ul{
            display: grid;
            grid-gap: 1px;
            border-radius: 10px;
            overflow: hidden;
            li{
                background-color: rgba(255, 255, 255, 0.837);
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15px;
                box-sizing: border-box;
                >span{
                    opacity: 0.8;
                }
                >.left{
                    display: flex;
                    align-items: center;
                    gap: 10px;
                    i{
                        font-size: 20px;
                    }
                }
            }
        }
        /deep/.bt{
            border-radius: 100px !important;
            background-color: transparent;
            border: 1px solid #ccced1 !important;
            padding: 25px 0 !important;
            font-weight: bold;
            box-shadow: 0px 5px 20px -3px rgb(220,219,219);
        }
    }
}
</style>
